<template>

等级名称<input type="text" v-model="mrName">
等级状态<select v-model="mrStateId">
    <option :value="0">--请选择--</option>
    <option :value="1">启用</option>
    <option :value="2">禁用</option>
</select>
<input type="button" value="查询" class="btn btn-success" @click="LoadData">


<h2>显示页面</h2>
<table border="1" class="table table-success table-str">
    <thead>
    <tr>
        <td>会员等级编号</td>
        <td>会员等级名称</td>
        <td>会员等级状态</td>
        <td>最小成长值</td>
        <td>最大成长值</td>     
        <td>操作列</td>
    </tr>
</thead>
<tbody>
    <tr v-for="item in info">
        <td>{{item.Rank_Id}}</td>
        <td>{{item.Rank_Name}}</td>
        <td>{{item.Rank_State==true?"启用":"禁用"}}</td>
        <td>{{item.Rank_MinPoint}}</td>
        <td>{{item.Rank_MaxPoint}}</td>     
        <td>操作列
            <a href="#" @click="Delete(item.Rank_Id)" style="margin-right: 20px;">删除</a>

            <a href="#" @click="Update(item.Rank_Id)">修改</a>

            
        </td>
    </tr>
    
</tbody>
</table>

<span>
    当前共{{ pageInfo.totalCount }}条数据，每页显示{{ pageInfo.pageSize }}条数据
当前第{{pageInfo.pageIndex}}/{{pageInfo.pageCount  }}页
<a href="#" @click="PageLoadInfo('F')" style="margin-right: 20px;">首页</a>
<a href="#" @click="PageLoadInfo('S')" style="margin-right: 20px;">上一页</a>
<a href="#" @click="PageLoadInfo('N')" style="margin-right: 20px;">下一页</a>
<a href="#" @click="PageLoadInfo('E')" style="margin-right: 20px;">尾页</a>


</span>

<select v-model="newSize" @change="ChangeSize" style="margin-right: 20px;">
    <option :value="1">1条/页</option>
    <option :value="2">2条/页</option>
    <option :value="3">3条/页</option>
    <option :value="5">5条/页</option>
</select>

<input type="text" v-model="newIndex" style="width: 40px;">
<input type="button" value="跳转" @click="Tiao">

</template>
<script setup lang="ts">

import { onMounted,ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//分页的
const newSize=ref(2);
const newIndex=ref("");
//创建分页响应式数据
const pageInfo=ref({
pageIndex:1,
pageSize:2,
totalCount:0,
pageCount:0

})


//创建路由对象实例
const router=useRouter();

//创建响应式数据用于绑定参数
const mrName=ref('');
const mrStateId=ref(0)

//修改的跳转
const Update=(Rid:number)=>{
  router.push({
    name:"UpdateMemberRank",
    params:{
        id:Rid

    }
  });

}

const info=ref([{
    Rank_Id:0,
    Rank_Name:"",
    Rank_State:true,
    Rank_MinPoint:0,
    Rank_MaxPoint:0


}])

//生命周期钩子
onMounted(()=>{
LoadData();

})

//显示+查询+分页
const LoadData=()=>{
axios.get('https://localhost:7153/api/MemberRank/ShowRank',
{
    params:{
        MRname:mrName.value,
        MRstateId:mrStateId.value,
        pageIndex:pageInfo.value.pageIndex,
        pageSize:pageInfo.value.pageSize
    }
}
)
.then(res=>{

    console.log(res.data)
    info.value=res.data.Data_Info;
    
    
    pageInfo.value.totalCount=res.data.TotalCount;
    
    pageInfo.value.pageCount=res.data.PageCount;

})

}




//分页方法
const PageLoadInfo=(choose:string)=>{
switch(choose)
{
    case "F":
        pageInfo.value.pageIndex=1;
        break;
        case "E":
            pageInfo.value.pageIndex=pageInfo.value.pageCount;
            break;
           case "S":
            if(pageInfo.value.pageIndex>1)
            {
                pageInfo.value.pageIndex--;

            }
            else{
                alert("已经是第一页了");
            }
            
            break;
            case "N":
               if(pageInfo.value.pageIndex<pageInfo.value.pageCount)
               {

                pageInfo.value.pageIndex++;


               }
               else
               {
                alert("已经是尾页了");

               }
                break; 



}
LoadData();


}
//页容量
const ChangeSize=()=>{

pageInfo.value.pageSize=newSize.value;
LoadData();

}
//跳转至几页
const Tiao=()=>{
var nIndex=newIndex.value;
if(nIndex==""){
    alert("不能为空");
    return;
}

if(isNaN(Number(nIndex))){
    alert("跳转页码必须为数字");
    return;
}
//判断起始页码必须大于1
if(Number(nIndex) <1){
    alert("跳转页码必须大于等于1");
    return;
}
//不能超过最大页码
if(Number(nIndex)>pageInfo.value.pageCount){
    alert("跳转页码必须小于总页码");
    newIndex.value="";
    return;
}

pageInfo.value.pageIndex= Number(nIndex);
LoadData();

}



//删除


const Delete=(Rid:number)=>{

    if(confirm("你确定要删除吗?")){
        axios.get('https://localhost:7153/api/MemberRank/DeleteMemberRank',
        {
            params:{
                MRid:Rid
            }
        }
        )

   .then(res=>{
    if(res.data>0){
     alert("删除成功");
     LoadData();
    }
    else{
        alert("删除失败");
    }

})

    }

}

</script>